<template>
  <div class="xgd-marquee panel">
    <span class="xgd-marquee__icon">
      <i class="iconfont icon-laba"></i>
    </span>
    <span class="xgd-marquee__content-box">
      <span class="xgd-marquee__content" :class="{'xgd-marquee__content--active':this.actionClass}">{{ showText }}</span>
    </span>
  </div>
</template>
<script>
  export default {
    props:{
      content:{
        type:Array,
        default:[]
      },
      switchTime:{
        type:Number,
        default: 6000
      }
    },
    data(){
      return {
        showText:'公告',
        nowIndex:0,
        timer:null,
        timerOut:null,
        actionClass: false
      }
    },
    watch:{
      content(){
        this.nowIndex = 0
        this.switchMarquee()
      }
    },
    methods:{
      switchMarquee(){
        clearInterval(this.timer)
        this.changeMarquee()
        this.timer = setInterval(()=>{
          this.changeMarquee()
        },this.switchTime)
      },
      changeMarquee(){
        this.actionClass = true
        clearInterval(this.timerOut)
        this.timerOut = setTimeout(()=>{
          this.actionClass = false
        },1000)
        setTimeout(()=>{
          this.showText = this.content[this.nowIndex]
          this.nowIndex = this.nowIndex>=this.content.length-1? 0 : this.nowIndex+1
        },250)
      }
    },
    created(){
      this.switchMarquee()
    }
  }
</script>